<template>
    <div class="employee-management-container">
        <pageTitle :title="'新增組織'" />
        <!-- 顶部搜索和按钮区域 -->
        <div class="top-action-bar">
            <el-row :gutter="20" align="middle">
                <el-col :span="12">
                    <el-input placeholder="请输入员工姓名或工号" v-model="searchQuery" class="search-input-with-button" clearable
                        @clear="handleSearch" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button type="primary" @click="handleSearch">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="12" class="action-buttons">
                    <el-button type="primary" @click="addEmployee">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>新增员工</span>
                    </el-button>
                    <el-button type="success" @click="exportData">
                        <el-icon>
                            <Download />
                        </el-icon>
                        <span>导出数据</span>
                    </el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 主体内容区域 -->
        <div class="main-content-wrapper">
            <el-row :gutter="20">
                <!-- 左侧组织架构树 -->
                <el-col :span="5">
                    <div class="organization-tree-card">
                        <div class="tree-header">
                            <span class="tree-title">组织架构</span>
                            <el-button type="text" @click="refreshTree">
                                <el-icon>
                                    <Refresh />
                                </el-icon>
                                <span>刷新</span>
                            </el-button>
                        </div>
                        <el-tree :data="orgTree" :props="treeProps" node-key="id" default-expand-all highlight-current
                            :expand-on-click-node="false" @node-click="handleNodeClick">
                            <template #default="{ node, data }">
                                <span class="custom-tree-node">
                                    <span>{{ node.label }}</span>
                                    <span v-if="data.count" class="node-count">({{ data.count }})</span>
                                </span>
                            </template>
                        </el-tree>
                    </div>
                </el-col>

                <!-- 右侧员工表格 -->
                <el-col :span="19">
                    <div class="employee-table-card">
                        <el-table :data="employeeList" style="width: 100%" v-loading="loading" class="no-border-table"
                            :row-selection="{ selectedRows: selectedRows, selectable: isSelectable }"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="employeeId" label="工号" width="120" align="center" />
                            <el-table-column prop="name" label="姓名" width="120" align="center" />
                            <el-table-column prop="department" label="部门" align="center" />
                            <el-table-column prop="position" label="职位" width="150" align="center" />
                            <el-table-column prop="phone" label="电话" width="150" align="center" />
                            <el-table-column prop="email" label="邮箱" align="center" />
                            <el-table-column label="操作" width="280" align="center" fixed="right">
                                <template #default="{ row }">
                                    <el-button type="primary" size="small" @click="viewDetail(row)">
                                        查看详情
                                    </el-button>
                                    <el-button type="success" size="small" @click="adjustDepartment(row)">
                                        调整岗位
                                    </el-button>
                                    <el-button type="warning" size="small" @click="adjustDepartment(row)">
                                        下移
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination-wrapper">
                            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                :page-sizes="[10, 20, 50, 100]" :small="true" :background="true"
                                layout="total, sizes, prev, pager, next, jumper" :total="total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search, Plus, Download, Refresh } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import pageTitle from "@/components/pageTitle/pageTitle.vue";

// 响应式数据
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);

// 多选相关的响应式数据
const selectedRows = ref([]);
const isSelectable = () => true; // 这里可以根据条件决定是否可选择，目前全部可选择

// 组织架构树数据
const orgTree = ref([
    {
        id: 1,
        label: '总公司',
        count: 120,
        children: [
            {
                id: 2,
                label: '技术部',
                count: 60,
                children: [
                    { id: 3, label: '前端组', count: 20 },
                    { id: 4, label: '后端组', count: 25 },
                    { id: 5, label: '测试组', count: 15 }
                ]
            },
            {
                id: 6,
                label: '市场部',
                count: 30,
                children: [
                    { id: 7, label: '市场一组', count: 15 },
                    { id: 8, label: '市场二组', count: 15 }
                ]
            },
            {
                id: 9,
                label: '人事部',
                count: 20,
                children: [
                    { id: 10, label: '招聘组', count: 10 },
                    { id: 11, label: '培训组', count: 10 }
                ]
            }
        ]
    }
]);

const treeProps = {
    children: 'children',
    label: 'label'
};

// 员工列表数据
const employeeList = ref([
    {
        id: 1,
        name: '张三',
        employeeId: '10001',
        department: '技术部/前端组',
        position: '前端工程师',
        phone: '13800138001',
        email: 'zhangsan@example.com'
    },
    {
        id: 2,
        name: '李四',
        employeeId: '10002',
        department: '技术部/后端组',
        position: 'Java工程师',
        phone: '13800138002',
        email: 'lisi@example.com'
    },
    {
        id: 3,
        name: '王五',
        employeeId: '10003',
        department: '市场部/市场一组',
        position: '市场专员',
        phone: '13800138003',
        email: 'wangwu@example.com'
    },
    {
        id: 4,
        name: '赵六',
        employeeId: '10004',
        department: '人事部/招聘组',
        position: '招聘专员',
        phone: '13800138004',
        email: 'zhaoliu@example.com'
    },
    {
        id: 5,
        name: '钱七',
        employeeId: '10005',
        department: '技术部/测试组',
        position: '测试工程师',
        phone: '13800138005',
        email: 'qianqi@example.com'
    }
]);

// 生命周期钩子
onMounted(() => {
    fetchEmployeeData();
});

// 方法
const fetchEmployeeData = () => {
    loading.value = true;
    // 模拟API请求
    setTimeout(() => {
        total.value = 50; // 假设总共有50条数据
        loading.value = false;
    }, 500);
};

const handleSearch = () => {
    currentPage.value = 1;
    fetchEmployeeData();
};

const handleNodeClick = (data) => {
    console.log('点击节点:', data);
    fetchEmployeeData();
};

const refreshTree = () => {
    console.log('刷新组织架构树');
};

const addEmployee = () => {
    ElMessage.info('点击了新增员工');
    // 这里应该是打开新增员工的对话框
};

const exportData = () => {
    ElMessage.success('开始导出数据');
    // 这里应该是导出数据的逻辑
};

const viewDetail = (row) => {
    ElMessage.success(`查看 ${row.name} 的详情`);
    // 这里应该是打开详情页或对话框
};

const adjustDepartment = (row) => {
    ElMessage.warning(`调整 ${row.name} 的部门`);
    // 这里应该是打开调整部门的对话框
};

const handleSizeChange = (val) => {
    pageSize.value = val;
    fetchEmployeeData();
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchEmployeeData();
};

const handleSelectionChange = (selection) => {
    selectedRows.value = selection;
    console.log('选中的行:', selectedRows.value);
};
</script>

<style scoped lang="less">
.employee-management-container {
    padding: 20px;
    background-color: #fff;

    .top-action-bar {
        margin-bottom: 20px;
        padding: 16px 24px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        margin-top: 20px;

        .search-input-with-button {
            max-width: 500px;

            .el-input-group__append {
                background-color: var(--el-color-primary);
                color: white;
                border: none;

                &:hover {
                    opacity: 0.9;
                }
            }
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;

            .el-button {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }
        }
    }

    .main-content-wrapper {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        padding: 16px;
        min-height: calc(100vh - 320px);
    }

    .organization-tree-card {
        border: 1px solid #ebeef5;
        border-radius: 8px;
        padding: 16px;
        height: 100%;
        background-color: #fff;

        .tree-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0 16px;

            .tree-title {
                font-size: 16px;
                font-weight: 600;
                color: #303133;
            }

            .el-button {
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;

            .node-count {
                color: #909399;
                font-size: 12px;
            }
        }

        .el-tree {
            :deep(.el-tree-node__content) {
                height: 36px;
            }
        }
    }

    .employee-table-card {
        padding: 16px;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        background-color: #fff;

        .no-border-table {

            :deep(.el-table__header),
            :deep(.el-table__body),
            :deep(.el-table__row),
            :deep(.el-table__cell) {
                border: none !important;
            }

            :deep(.el-table__header th) {
                background-color: #f4f8ff;
                font-weight: 600;
                padding: 20px;
            }

            :deep(.el-table__row):hover td {
                background-color: #f5f7fa !important;
            }
        }

        .pagination-wrapper {
            margin-top: 24px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>